
<ul id="tags_list" data-cy="tags_list" class="flex flex-wrap items-center mb-4 list-none">
    {% for tag in tags %}
    <!-- TODO: allow teacher to edit tags; not urgent, but for a better ux! -->
        <li 
            id="tag_{{loop.index}}"
            class='relative border-2 rounded-lg border-green-300 p-2 px-5 mx-2 mb-2 shadow'>
            {{tag}}
            {% if not public and username == creator %}
                <span class='absolute top-0.5 right-0.5 text-gray-600 hover:text-red-400 fa-regular fa-circle-xmark'
                {% if adventure_id %}
                    hx-target="#tags_dropdown"
                    hx-delete="/tags/delete/{{tag}}/{{adventure_id}}" 
                    hx-swap="beforeend"
                    _="on htmx:afterRequest
                        if detail.xhr.status == 200 then remove #tag_{{loop.index}} end"
                {% else %}
                    _='on click remove #tag_{{loop.index}}'
                {% endif %}
                ></span>
            {% endif %}
        </li>
    {% endfor %}
</ul>